<template>
    <div class="box-order">
        <el-table :data="tableData" stripe style="width: 100%;text-align:left;cursor:pointer;">
            <el-table-column prop="order_id" label="订单号"></el-table-column>
            <el-table-column prop="create_time" label="下单日期"></el-table-column>
            <el-table-column prop="book_time" label="预约日期"></el-table-column>
            <el-table-column prop="user_name" label="姓名"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="add_from" label="起始地"></el-table-column>
            <el-table-column prop="add_to" label="目的地"></el-table-column>
            <el-table-column prop="state" label="状态"></el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button  @click='toDetail(scope.$index, scope.row)' size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="box-pagi">
            <el-pagination @current-change="pageChange" :current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
        </div>
        
        <el-dialog title="订单详情" :visible.sync="showPop" width="600px">
            <div class="row-dialog">
                <span class="label">订单编号</span>
                <span class="txt">{{detail.order_id}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">下单日期</span>
                <span class="txt">{{detail.create_time}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">预约日期</span>
                <span class="txt">{{detail.book_time}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">需要人力</span>
                <span class="txt">{{detail.man_qty}}人</span>
            </div>
            <div class="row-dialog">
                <span class="label">起始地</span>
                <span class="txt">{{detail.add_from}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">目的地</span>
                <span class="txt">{{detail.add_to}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">姓名</span>
                <span class="txt">{{detail.user_name}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">电话</span>
                <span class="txt">{{detail.phone}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">车型</span>
                <span class="txt">{{detail.car_name}}</span>
            </div>

        </el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      detail: {},
      showPop: false,
      pageIndex:1,
      pageSize:10,
      total:0
    };
  },
  methods: {
    toDetail(index, row) {
      this.showPop = true;
      this.detail = row;
    },
    getOrderList() {
      let self = this;
      let mid = JSON.parse(localStorage.getItem("userInfo")).merchantId;
      fetch("/api/admin/orderlist?mid=" + mid + "&pos=3&pageIndex="+ this.pageIndex + '&pageSize='+this.pageSize)
        .then(response => response.json())
        .then(ret => {
          ret.data.row.forEach(item => {
            item.state = item.state == 1 ? "正常" : "已取消";
          });
          self.tableData = ret.data.row;
          self.total = ret.data.total;
          console.log("ret==" + JSON.stringify(self.tableData));
        })
        .catch(err => console.log("Oh, error", err));
    },
      pageChange(e) {
      this.pageIndex = e;
      this.getOrderList()
    }
  },
  created() {
    this.getOrderList();
  },
  components: {}
};
</script>

<style lang='scss' scoped>
@import "../assets/scss/common.scss";
.box-order {
  width: 100%;
   .row-dialog{
      display: flex;
      font-size: 14px;
      margin-bottom: 20px;
      .label{
          width: 70px;
          color: #999;
          margin-right: 20px;
          text-align: right;
      }
      .txt{
          flex:1; 
          text-align: left;
      }
  }
  .box-pagi{
      margin-top:20px;
  }
}
</style>
